import html2canvas from 'html2canvas';
import { HashMap } from '../utils/hashmap'
import $ from 'jquery'
import 'jquery-ui-dist/jquery-ui'
import 'jquery-ui-dist/jquery-ui.css'
import '../utils/jquery.contextmenu.r2'

export const TemplateOptions = {
    methods: {
        layoutInit() {
            this.widgetData = new HashMap();
            // if (this.htemplet !== undefined && this.htemplet != null) {
            //     $('#name').val(this.htemplet['name']);
            //     $('#terminalType').html(this.htemplet['terminalType']);
            //     this.iwidth = this.htemplet['width'];
            //     this.ihiegh = this.htemplet['height'];
            //     this.calPercent($('#compont').width() | 0, $('#compont').height() | 0);
            //     var resolution = this.iwidth + '*' + this.iheight;
            //     $('#resolution').find("option:contains('" + resolution + "')").attr('selected',true);
            // }

            // if (this.twidget === undefined || this.twidget == null || this.twidget.length < 1) {
            //     return;
            // }
            this.widgetData.clear();
            var coindex = 0;
            let _this = this;
            $.each(this.twidget,function(i) {
                coindex++;
                var type = _this.twidget[i]['type'];
                var keyid = type + _this.twidget[i]['index'];
                _this.widgetData.put(keyid, _this.twidget[i]);
                _this.addWiget(_this.twidget[i],type);
            });
            // $('#accordion').find('a').attr('index',coindex);
        },
        // 更新属性值
        doUpdateAttrForm(key) {
            const itemData = this.widgetData.get(key)
            console.log('被选中:', itemData)
            const x = (itemData['x'].split(',')[1].split('%')[0] * $('#compont').width() / 100)
            const y = (itemData['y'].split(',')[1].split('%')[0] * $('#compont').height() / 100)
            const w = (itemData['w'].split(',')[1].split('%')[0] * $('#compont').width() / 100)
            const h = (itemData['h'].split(',')[1].split('%')[0] * $('#compont').height() / 100)
            this.attrForm.formData.title = itemData.name
            this.attrForm.showArea = itemData.type
            this.attrForm.formData.W = w
            this.attrForm.formData.H = h    
        },
        parseResolution(resolution) {
            this.iwidth = resolution.split('*')[0];
            this.iheight = resolution.split('*')[1];
            var divWidth = $('#compont').width();
            var divHeight = $('#compont').height();
            this.calPercent(divWidth, divHeight);
        },
        calPercent(width, height) {
            this.iwidthPercent = this.iwidth / width;
            this.iheightPercent = this.iheight / height;
        },
        dStyleChanged(type,val) {
            var id = $('#right').attr('currentSelectedWidgetId');
            if (this.widgetData.containsKey(id)) {
                if (type === 'fontStyle') {
                    this.widgetData.get(id)['style'] = val;
                } else if (type === 'fontFamily') {
                    this.widgetData.get(id)['fontfamily'] = val;
                } else if (type === 'fontSize') {
                    this.widgetData.get(id)['fontsize'] = val;
                } else if (type === 'fontColor') {
                    this.widgetData.get(id)['fontcolor'] = val;
                } else if (type === 'bgColor') {
                    this.widgetData.get(id)['bgcolor'] = val;
                }
            }
        },
        refresh() {
            if (this.widgetData === undefined || this.widgetData === null || this.widgetData.length < 1) {
                return;
            }
            let _this = this;
            var currentSelectedWidgetId = $('#right').attr('currentSelectedWidgetId');
            $('#compont').children().each(function() {
                var id = $(_this).attr('id');
                var itemData = _this.widgetData.get(id);
                if (itemData != null) {
                    _this.widgetUpdate($(_this),itemData);
                    if (id === currentSelectedWidgetId) {
                        _this.updateSelectedWidgetParams(id, _this.widgetData.get(id)['type'], $(_this).attr('name'));
                    }
                } else {
                    if (_this.type === currentSelectedWidgetId) {
                        _this.resetVal();
                    }
                }
            });
        },
        widgetUpdate(view, itemData) {
            const x = Number(itemData['x'])
            const y = Number(itemData['y'])
            const w = Number(itemData['w'])
            const h = Number(itemData['h'])
            const type = itemData.type
            const avl = itemData.avl

            view.css('top', `${y * this.iheightPercent}px`)
            view.css('left', `${x * this.iwidthPercent}px`)
            view.css('width', `${w * this.iwidthPercent}px`)
            view.css('height', `${h * this.iheightPercent}px`)
            view.attr('avl', avl)

            switch(type) {
                case 'Background':
                    itemData.bgimg && view.css({ 'background': `url(${itemData.bgimg})`, 'background-size': '100% 100%' })
                    break
                case 'Weather':
                    itemData.weatherAttr && itemData.weatherAttr.length > 0
                    && view.find('img').attr('src', itemData.weatherAttr[0].url)
                    break
                case 'Clock':
                    if (itemData.clockAttr) {
                        let span = view.find('span')
                        let {html, font, color, size} = itemData.clockAttr
                        span.html(html)
                        span.css({
                            'font-family': font,
                            color,
                            'font-size':  Math.round(Number(size)/4) + 'px'
                        })
                    }
                    break
                case 'Timer':
                    if (itemData.timerAttr) {
                        let span = view.find('span')
                        let {html, font, color, size} = itemData.timerAttr
                        span.html(html)
                        span.css({
                            'font-family': font,
                            color,
                            'font-size':  Math.round(Number(size)/4) + 'px'
                        })
                    }
                    break
                default: 
            }

        },
        widgetResize(view,left,top,width,height,drag) {
            var keyId = view.attr('id');
            if ((left + width) > $('#compont').width()) {
                width = $('#compont').width() - left;
            }
            if ((top + height) > $('#compont').height()) {
                height = $('#compont').height() - top;
            }
            if (drag) {
                var px = Math.floor(left * 10000 / $('#compont').width()) / 100;
                var py = Math.floor(top * 10000 / $('#compont').height()) / 100;
                
                py = py > 100 ? 100 : py;
                px = px > 100 ? 100 : px;
                var x = Math.floor(px * this.iwidth / 100);
                var y = Math.floor(py * this.iheight / 100);
                
                // $('#Y').val(y);
                // $('#X').val(x);
                // $('#PY').val(py);
                // $('#PX').val(px);
                // 更新xy坐标值
                this.attrForm.formData.X = x
                this.attrForm.formData.Y = y
                if (this.widgetData.containsKey(keyId)) {
                    this.widgetData.get(keyId)['x'] = x + ',' + px + '%';
                    this.widgetData.get(keyId)['y'] = y + ',' + py + '%';
                }
            } else {
                var pw = Math.floor(width * 10000 / $('#compont').width()) / 100;
                var ph = Math.floor(height * 10000 / $('#compont').height()) / 100;
                pw = pw > 100 ? 100 : pw;
                ph = ph > 100 ? 100 : ph;
                var w = Math.floor(pw * this.iwidth / 100);
                var h = Math.floor(ph * this.iheight / 100);
                // 更新wh高宽度
                this.attrForm.formData.W = w
                this.attrForm.formData.H = h
                // $('#W').val(w);
                // $('#H').val(h);
                // $('#PW').val(pw);
                // $('#PH').val(ph);
                if (this.widgetData.containsKey(keyId)) {
                    this.widgetData.get(keyId)['w'] = w + ',' + pw + '%';
                    this.widgetData.get(keyId)['h'] = h + ',' + ph + '%';
                }
            }
        },
        widgetSelected($this) {
            var key = $this.attr('id');
            var type = $this.attr('type');
            this.$emit('widgetClick', $this)
            // $('#right').attr('currentSelectedWidgetId',key);
            // $('#index').html(Number($this.attr('xindex')));
            // this.updateSelectedWidgetParams(key, type, $this.attr('name'))
        },
        // 获取widget相关信息
        __getWidgetInfo(widget) {
            return {
                x: this.__px2real(widget.css('left')),
                y: this.__px2real(widget.css('top')),
                width: this.__px2real(widget.css('width')),
                height: this.__px2real(widget.css('height')),
                name: widget.attr('title'),
                z: widget.attr('xindex'),
                areaId: widget.attr('type'),
                avl: widget.attr('avl')
            }
        },
        // px 2 number
        __px2number(px) {
            return Number(px.replace('px', ''))
        },
        // px 2 real 元素px值转实际模版值
        __px2real(px) {
            return Math.round(this.__px2number(px) / this.iwidthPercent)
        },
        // 给widget设置素材
        __widgetSetElement(widget, elementOpts) {
            const eleStyle = 'width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px;'
            switch(elementOpts.type) {
                case 'video':
                    widget.html(`<video autoplay src="${elementOpts.url}" style="${eleStyle}" />`)
                    break;
                case 'img':
                    widget.html(`<img src="${elementOpts.url}" style="${eleStyle}" />`)
                    break;
                default:
            }
        },
        // 重置widget
        __resetWidget() {
            $('#compont').children().each(function() {
                $(this).unbind()
                $(this).remove()
            });
        },
        __resetWidgetOpacity() {
            $('#compont').children().each(function() {
                $(this).css('opacity', 1)
            });
        },

        initFontStyle(type) {
            var fontStley = $('#fontStyle');
            fontStley.html('');
            if (type === 'ScrollText') {
                fontStley.append("<option value='0'>横向滚动</option>");
                // fontStley.append("<option value='1'>纵向滚动</option>");
            } else {
                fontStley.append("<option value='0'>样式一</option>");
            }
        },
        // 刷新属性参数
        updateSelectedWidgetParams(key,type,name) {
            $('#areaName').attr('widgetId',key);
            $('#areaName').val(name);
            if (this.widgetData.containsKey(key)) {
                this.doUpdateAttrForm(key)
                // var w = this.widgetData.get(key)['w'];
                // var h = this.widgetData.get(key)['h'];
                // var x = this.widgetData.get(key)['x'];
                // var y = this.widgetData.get(key)['y'];
                // $('#W').val(w.split(',')[0]);
                // $('#H').val(h.split(',')[0]);
                // $('#X').val(x.split(',')[0]);
                // $('#Y').val(y.split(',')[0]);
                // $('#PW').val(w.split(',')[1].split('%')[0]);
                // $('#PH').val(h.split(',')[1].split('%')[0]);
                // $('#PX').val(x.split(',')[1].split('%')[0]);
                // $('#PY').val(y.split(',')[1].split('%')[0]);
                if (type === 'ScrollText' || type === 'Clock' || type === 'Timer' || type === 'Weather' || type === 'StationList') {
                    $('#dstyle').css('display','block');
                    if (type === 'ScrollText') {
                        $('#dspeed').css('display','block');
                        var fontSpeed = this.widgetData.get(key)['speed'];
                        if (fontSpeed === undefined || fontSpeed == null || fontSpeed === '') {
                            $('#fontSpeed').find('option').eq(0).attr('selected',true);
                        } else {
                            $('#fontSpeed').find("option[value='" + fontSpeed + "']").attr('selected',true);
                        }
                    } else {
                        $('#dspeed').css('display','none');
                    }
                    this.initFontStyle(type);
                    var fontStyle = this.widgetData.get(key)['style'];
                    if (fontStyle === undefined || fontStyle == null || fontStyle === '') {
                        $('#fontStyle').find('option').eq(0).attr('selected',true);
                    } else {
                        $('#fontStyle').find("option[value='" + fontStyle + "']").attr('selected',true);
                    }
                    var fontfamily = this.widgetData.get(key)['fontfamily'];
                    if (fontfamily === undefined || fontfamily == null || fontfamily === '') {
                        $('#fontFamily').find('option').eq(0).attr('selected',true);
                    } else {
                        $('#fontFamily').find("option[value='" + fontfamily + "']").attr('selected',true);
                    }

                    var fontsize = this.widgetData.get(key)['fontsize'];
                    if (fontsize === undefined || fontsize == null || fontsize === '') {
                        $('#fontSize').find('option').eq(0).prop('selected',true);
                    } else {
                        $('#fontSize').find("option[value='" + fontsize + "']").prop('selected',true);
                    }
                    var fontColor = this.widgetData.get(key)['fontcolor'];
                    if (fontColor === undefined || fontColor == null || fontColor === '') {
                        $('#fontColor').val('');
                    } else {
                        $('#fontColor').val(fontColor);
                    }

                    var bgColor = this.widgetData.get(key)['bgcolor'];
                    if (bgColor === undefined || bgColor == null || bgColor === '') {
                        $('#bgColor').val('');
                    } else {
                        $('#bgColor').val(bgColor);
                    }
                } else {
                    // $('#dstyle').css('display','none');
                    // $('#dspeed').css('display','none');
                }
            } else {
                this.resetVal()
                // $('#W').val('');
                // $('#H').val('');
                // $('#X').val('');
                // $('#Y').val('');
                // $('#PW').val('');
                // $('#PH').val('');
                // $('#PX').val('');
                // $('#PY').val('');
                // $('#dstyle').css('display','none');
            }
        },
        updateSelectedWidget(x,flag) {
            this.isChanged = true;
            var currentSelectedWidgetId = $('#right').attr('currentSelectedWidgetId');
            let _this = this;
            $('#compont').children().each(function() {
                var id = $(this).attr('id');
                var itemData = _this.widgetData.get(id);
                if (itemData != null && id === currentSelectedWidgetId) {
                    var isValid = _this.isModifyValid(x,flag,itemData);
                    if (!isValid) {
                        this.$alert('提示', '已经超出分辨率')
                        return;
                    }
                    var ww = 0;
                    var wp = 0;
                    var xx = 0;
                    var xp = 0;
                    var yy = 0;
                    var yp = 0;
                    var tmpX = 0;
                    var tmpY = 0;
                    var hh = 0;
                    var hp = 0;
                    var tmpW = 0;
                    var tmpH = 0;
                    switch (flag) {
                        case 1:
                            xx = Math.floor(x / _this.iwidthPercent);
                            xp = Math.floor(x * 10000 / _this.iwidth) / 100;
                            $('#PX').val(xp);
                            $(this).css('left',xx + 'px');
                            itemData['x'] = '' + x + ',' + xp + '%';
                            break;
                        case 2:
                            yy = Math.floor(x / _this.iheightPercent);
                            yp = Math.floor(x * 10000 / _this.iheight) / 100;
                            $('#PY').val(yp);
                            $(this).css('top',yy + 'px');
                            itemData['y'] = '' + x + ',' + yp + '%';
                            break;
                        case 3:
                            tmpX = Math.floor(x * _this.iwidth / 100);
                            xx = Math.floor(tmpX / _this.iwidthPercent);
                            $('#X').val(tmpX);
                            $(this).css('left',xx + 'px');
                            itemData['x'] = '' + tmpX + ',' + x + '%';
                            break;
                        case 4:
                            tmpY = Math.floor(x * _this.iheight / 100);
                            yy = Math.floor(tmpY / _this.iheightPercent);
                            $('#Y').val(tmpY);
                            $(this).css('top',yy + 'px');
                            itemData['y'] = '' + tmpY + ',' + x + '%';
                            break;
                        case 5:
                            ww = Math.floor(x / _this.iwidthPercent);
                            wp = Math.floor(x * 10000 / _this.iwidth) / 100;
                            $('#PW').val(wp);
                            $(this).width(ww);
                            itemData['w'] = '' + x + ',' + wp + '%';
                            break;
                        case 6:
                            hh = Math.floor(x / _this.iheightPercent);
                            hp = Math.floor(x * 10000 / _this.iheight) / 100;
                            $('#PH').val(hp);
                            $(this).height(hh);
                            itemData['h'] = '' + x + ',' + hp + '%';
                            break;
                        case 7:
                            tmpW = Math.floor(x * _this.iwidth / 100);
                            ww = Math.floor(tmpW / _this.iwidthPercent);
                            $('#W').val(tmpW);
                            $(this).width(ww);
                            itemData['w'] = '' + tmpW + ',' + x + '%';
                            break;
                        case 8:
                            tmpH = Math.floor(x * _this.iheight / 100);
                            hh = Math.floor(tmpH / _this.iheightPercent);
                            $('#H').val(tmpH);
                            $(this).height(hh);
                            itemData['h'] = '' + tmpH + ',' + x + '%';
                            break;
                    }
                }
            });
        },
        isModifyValid(srx,flag,itemData) {
            var retVal = true;
            var iW = 0;
            var iH = 0;
            var iX = 0;
            var iY = 0;
            var tmpX = 0;
            var tmpY = 0;
            switch (flag) {
                case 1:
                    iW = Number($('#W').val()) + Number(srx);
                    if (iW > this.iwidth) {
                        // $('#X').val(itemData['x'].split(',')[0]);
                        this.attrForm.formData.X = itemData['x']
                        retVal = false;
                    }
                    break;
                case 2:
                    iH = Number($('#H').val()) + Number(srx);
                    if (iH > this.iheight) {
                        // $('#Y').val(itemData['y'].split(',')[0]);
                        this.attrForm.formData.Y = itemData['y']
                        retVal = false;
                    }
                    break;
                case 5:
                    // iX = Number($('#X').val()) + Number(srx);
                    iX = Number(this.attrForm.formData.X) + Number(srx);
                    if (iX > this.iwidth) {
                        // $('#W').val(itemData['w'].split(',')[0]);
                        this.attrForm.formData.W = itemData['w']
                        retVal = false;
                    }
                    break;
                case 6:
                    iY = Number($('#Y').val()) + Number(srx);
                    if (iY > this.iheight) {
                        // $('#H').val(itemData['h'].split(',')[0]);
                        this.attrForm.formData.H = itemData['h']
                        retVal = false;
                    }
                    break;
                case 3:
                    tmpX = Math.floor(srx * this.iwidth / 100);
                    // iW = $('#W').val();
                    iW = this.attrForm.formData.W
                    if ((tmpX + Number(iW)) > this.iwidth) {
                        retVal = false;
                        // $('#PX').val(itemData['x'].split(',')[1].replace('%',''));
                    }
                    break;
                case 4:
                    tmpY = Math.floor(srx * this.iheight / 100);
                    // iH = $('#H').val();
                    iH = this.attrForm.formData.H
                    if ((tmpY + Number(iH)) > this.iheight) {
                        // $('#PY').val(itemData['y'].split(',')[1].replace('%',''));
                        retVal = false;
                    }
                    break;
                case 7:
                    tmpX = Math.floor(srx * this.iwidth / 100);
                    // iW = $('#X').val();
                    iW = this.attrForm.formData.X
                    if ((tmpX + Number(iW)) > this.iwidth) {
                        retVal = false;
                        // $('#PW').val(itemData['w'].split(',')[1].replace('%',''));
                    }
                    break;
                case 8:
                    tmpY = Math.floor(srx * this.iheight / 100);
                    // iH = $('#Y').val();
                    iH = this.attrForm.formData.Y
                    if ((tmpY + Number(iH)) > this.iheight) {
                        // $('#PH').val(itemData['h'].split(',')[1].replace('%',''));
                        retVal = false;
                    }
                    break;
            }
            return retVal;
        },
        addWiget(itemData, type) {
            var divAdd;
            var keyId = type + itemData['index'];
            // if (type === 'Imp' || type === 'Text' || type === 'Button' || type === 'Hd') {
            //     console.log(111)
            // } else {
            //     var widget = $('#accordion').find('a[name=' + type + ']');
            //     widget.removeClass('addWiget');
            //     widget.addClass('notclick');
            //     var widExist = $('#compont').find('[id=' + keyId + ']');
            //     if (widExist.length > 0) {
            //         return;
            //     }
            // }
            switch (type) {
                case 'Background':
                    divAdd = $('#backgroundC').clone();
                    divAdd.text(itemData['name']);
                    break;
                // 主播区
                case 'Main':
                    divAdd = $('#anchorC').clone();
                    break;
                // 综合区
                case 'Mixed':
                    divAdd = $('#videoC').clone();
                    break;
                // 音频区
                case 'Audio':
                    divAdd = $('#liveC').clone();
                    break;
                // 图文区
                case 'ImageText':
                    divAdd = $('#imageC').clone();
                    break;
                // 时钟区
                case 'Clock':
                    divAdd = $('#dateC').clone();
                    break;
                // 计时区
                case 'Timer':
                    divAdd = $('#timeC').clone();
                    break;
                // 天气区
                case 'Weather':
                    divAdd = $('#weatherC').clone();
                    break;
                // 网页区
                case 'Web':
                    divAdd = $('#webC').clone();
                    break;
                // 扩展区
                case 'Extension': 
                    divAdd = $('#formC').clone();
                    break;
                //滚动条
                case 'Scroll':
                    divAdd = $('#scollC').clone();
                    break;
            }
            divAdd.css('display','block').css('position','absolute').attr('xindex',itemData['index']).attr('name',itemData['name']).attr('title',itemData['title']).attr('id',keyId).attr('type',type);
            this.widgetUpdate(divAdd,itemData);
            let _this = this;
            // 背景不允许拖动
            // if(type !== 'Bg') {
            //     divAdd.draggable({
            //         containment: '#compont',
            //         scroll: false,
            //         stack: '#compont div',
            //         opacity: 0.5,
            //         drag: function(event, ui) {
            //             _this.isChanged = true;
            //             _this.widgetResize(divAdd,ui.position.left,ui.position.top,divAdd.width(),divAdd.height(),true);
            //         },
            //         start: function(event, ui) {
            //             _this.widgetSelected(divAdd);
            //         },
            //         stop: function(event, ui) {
            //         }
            //     });
            //     divAdd.resizable({
            //         containment: '#compont',
            //         start: function(event, ui) {
            //             _this.widgetSelected(divAdd);
            //         },
            //         resize: function(event, ui) {
            //             _this.isChanged = true;
            //             _this.widgetResize(divAdd,divAdd.position().left,divAdd.position().top,ui.size.width,ui.size.height,false);
            //         }
            //     });
            // }
            divAdd.click(function (e) {
                e.stopPropagation()
                _this.widgetSelected($(this));
                _this.__resetWidgetOpacity()
                divAdd.css('opacity', 0.5)
            })
            divAdd.dblclick(function () {
                _this.$eventBus.$emit('mkListLikeEidtShow')
            })
            divAdd.css('z-index', itemData['zindex']);
            $('#compont').append(divAdd);
            // this.bindMenu(divAdd,type);
        },
        bindMenu(divAdd, type) {
            let _this = this;
            divAdd.contextMenu('myMenu', {
                menuStyle: {
                    border: '0'
                }, //菜单项样式
                itemStyle: {
                    fontFamily: 'verdana',
                    backgroundColor: 'white',
                    color: 'black',
                    border: 'none',
                    padding: '0'
                }, //菜单项鼠标放在上面样式
                itemHoverStyle: {
                    color: 'blue',
                    backgroundColor: 'red',
                    border: 'none'
                }, //事件
                bindings: {
                    'item_1': function(t) {
                        $('#' + t.id).remove();
                        _this.removeWidget(t.id,type);
                    }
                }
            });
        },
        removeWidget(id,type) {
            this.isChanged = true;
            this.resetVal();
            var deleteId = this.widgetData.get(id)['id'];
            if (deleteId !== undefined && deleteId != null && deleteId !== '') {
                this.discardIds += deleteId + ',';
            }
            this.widgetData.remove(id);
            if (type === 'ImageText' || type === 'Text' || type === 'Button' || type === 'Scroll' || type === 'Mixed') {
                console.log(111)
            } else {
                var a = $('#accordion').find('a[name=' + type + ']');
                a.removeClass('notclick');
                a.addClass('addWiget');
            }
        },
        resetVal() {
            this.attrForm.formData.X = 0
            this.attrForm.formData.Y = 0
            this.attrForm.formData.W = 0
            this.attrForm.formData.H = 0
            // $('#W').val('');
            // $('#H').val('');
            // $('#X').val('');
            // $('#Y').val('');
            // $('#PW').val('');
            // $('#PH').val('');
            // $('#PX').val('');
            // $('#PY').val('');
            // $('#areaName').val('');
            // $('#areaName').attr('widgetId','');
            // $('#right').attr('currentSelectedWidgetId','');
            // $('#dstyle').css('display','none');
        },
        initNeedAddWidgetInfo(name) {
            // 清空属性值
            this.resetVal();

            const $this = $("[name='" + name + "']");
            this.isChanged = true;
            var type = $this.attr('name');
            var index = $this.attr('index');
            var key = type + index;
            var itemData = {};
            var addWidth = 200;
            var addHeight = 200;
            switch (type) {
                case 'Bg':
                    addWidth = 200;
                    addHeight = 200;
                    break;
                case 'Main':
                    addWidth = 200;
                    addHeight = 200;
                    break;
                case 'Mixed':
                    addWidth = 200;
                    addHeight = 200;
                    break;
                case 'Audio':
                    addWidth = 200;
                    addHeight = 200;
                    break;
                case 'ImageText':
                    addWidth = 200;
                    addHeight = 200;
                    break;
                // case 'ScrollText':
                //     addWidth = 200;
                //     addHeight = 80;
                //     break;
                case 'Logo':
                    addWidth = 80;
                    addHeight = 80;
                    break;
                case 'Clock':
                    addWidth = 170;
                    addHeight = 50;
                    break;
                case 'Timer':
                    addWidth = 110;
                    addHeight = 50;
                    break;
                case 'StationList':
                    addWidth = 300;
                    addHeight = 200;
                    break;
                case 'Weather':
                    addWidth = 220;
                    addHeight = 50;
                    break;
                case 'Web':
                    addWidth = 150;
                    addHeight = 150;
                    break;
                case 'Mask':
                    addWidth = 160;
                    addHeight = 100;
                    break;
                case 'Extension':
                    addWidth = 200;
                    addHeight = 200;
                    break;
                case 'Button':
                case 'Text':
                case 'Hd':
                default:break;
            }
            itemData['w'] = Math.floor(addWidth * this.iwidthPercent) + ',' + Math.floor(addWidth * 100 / $('#compont').width()) + '%';
            itemData['h'] = Math.floor(addHeight * this.iheightPercent) + ',' + Math.floor(addHeight * 100 / $('#compont').height()) + '%';
            itemData['x'] = '0,0%';
            itemData['y'] = '0,0%';
            itemData['name'] = $this.text();
            itemData['type'] = type;
            itemData['zindex'] = this.getMaxZindex() + 1;
            itemData['index'] = index;
            $this.attr('index', Number(index) + 1);
            this.widgetData.put(key,itemData);
            this.addWiget(itemData, type);
            this.doUpdateAttrForm(key);
        },
        getMaxZindex() {
            var max = 0;
            $('#compont').children().each(function () {
                var zindex = Number($(this).css('z-index'));
                max = max > zindex ? max : zindex;
            });
            return max;
        },
        doSubmitPreCheck(pathPre) {
            if (!this.isChanged) {
                this.$alert('提示', '模板未修改,无需保存!')
                return;
            }
            if (this.widgetData.isEmpty()) {
                this.$alert('提示', '请添加组件!')
                return;
            }
            var name = $('#name').val();//trim($("#name").val());
            if (name === '') {
                this.$alert('提示', '请填写模板名称!')
                return;
            }

            var keys = this.widgetData.keySet();
            for (var key in keys) {
                var zindex = $('#' + keys[key]).css('z-index');
                if (zindex === 'auto') {
                    zindex = 0;
                }
                this.widgetData.get(keys[key])['zindex'] = zindex;
            }
            this.realCommit(name,pathPre);
        },
        realCommit(name,pathPre) {
            this.$alert('提示', '保存中,请稍后...')
            let _this = this;
            html2canvas(this.$refs.capture).then(function (canvas) {
                var imgUri = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
                console.log('widgets:', JSON.stringify(_this.widgetData.values()));
                console.log('discardIds:', _this.discardIds);
                console.log('id:', _this.htemplet['id']);
                console.log('name:',name);
                console.log('imgUri:',imgUri);
        //        $.ajax({
        //            cache:false,
        //            type:"POST",//为post请求
        //            url:"updateSave",
        //            data:{
        //                widgets:JSON.stringify(widgetData.values()),
        //                width:iwidth,
        //                height:iheight,
        //                discard:discardIds,
        //                id:htemplet["id"],
        //                imgBase64:imgUri.toString(),
        //                name:name
        //            },
        //            async:true,
        //            dataType: "json",
        //            error:function(request){//请求失败之后的操作
        //                alert(request.msg, {icon: 0, title:'警告'});
        //                return;
        //            },
        //            success:function(response){//请求成功之后的操作
        //                isChanged = false;
        //                alert("保存成功", {icon: 0, title:'提示'});
        //                setTimeout(function(){
        //                    closeTab4Self(pathPre+"/program/htemplet");
        //                }, 100);
        //            }
        //        });
            });
        }
    }
}